<div class="main-content app-layout">
    <section layout="row" class="info-list-detail">
        <h2 flex="20">{/'Basic Information' | translate/}</h2>
        <div flex="80" layout="row" layout-wrap>
            <div flex="30"><h5>Version</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.Version/}</p></div>
            <div flex="30"><h5>Build</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.Build/}</p></div>
            <div flex="30"><h5>FeatureFlags</h5></div>
            <div flex="70"><p ng-class="{'no-info': !miscConfigCtrl.craneconfig.FeatureFlags}">
                {/miscConfigCtrl.craneconfig.FeatureFlags || ('Not configured' | translate)/}</p></div>
        </div>
    </section>

    <section layout="row" class="info-list-detail">
        <h2 flex="20">{/'Cluster Information' | translate/}</h2>
        <div flex="80" layout="row" layout-wrap>
            <div flex="30"><h5>{/'Cluster Name' | translate/}</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.SwarmInfo.Spec.Name/}</p></div>
            <div flex="30"><h5>{/'Manager Token' | translate/}</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.SwarmInfo.JoinTokens.Manager/}</p></div>
            <div flex="30"><h5>{/'Worker Token' | translate/}</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.SwarmInfo.JoinTokens.Worker/}</p></div>
            <div flex="30"><h5>{/'Updated At' | translate/}</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.SwarmInfo.UpdatedAt | date: 'yyyy-MM-dd HH:mm:ss'/}</p></div>
            <div flex="30"><h5>{/'Created At' | translate/}</h5></div>
            <div flex="70"><p>{/miscConfigCtrl.craneconfig.SwarmInfo.CreatedAt | date: 'yyyy-MM-dd HH:mm:ss'/}</p></div>
        </div>
    </section>
</div>
